import React, { useState } from 'react';
import AxCard from '@/components/AxBase/AxCard';
import { AxLayout } from '@/components/AxBase';
import { Breadcrumb, Table } from 'antd';
import './style.css';
import { AxTable } from '@/components/AxList';
import { axconst } from '@/shared/axconst';
import AxColumnAction from '@/components/AxList/AxColumnAction';

const Index: React.FC<any> = props => {
    const [drawerVisible, setDrawerVisible] = useState(false);
    const [createVisible, setCreateVisible] = useState(false);
    const [managerCreateVisible, setManagerCreateVisible] = useState(false);

    /** 配置列 */
    const columns = [
        {
            title: '类型',
            dataIndex: 'orgName0',
        },
    ];

    const data = {
        list: [{
            id: 0,
            orgName0: '浓硫酸',
            orgName1: '那是一种内在的东西， 他们到达不了，也无法触及的',
            orgName2: '产品规格：AR',
            orgName3: '别名：醋酸;冰醋酸',
            orgName4: '￥8.20',
            orgName5: '库存：9000',
            orgName6: '管控：非管控',
            orgName7: '包装:1瓶',
            orgName8: '性状：固体',
            orgName9: '销量：0',
            orgName10: '分类编码：1093859-61-0',
            orgName11: '0'

        }, {
            id: 1,
            orgName0: '22',
            orgName1: '2',
            orgName2: '甘油',
            orgName3: '7681-52-9',
            orgName4: '固体',
            orgName5: 'g',
            orgName6: '1000000',
            orgName7: '1',
            orgName8: '通过审核',
            orgName9: '1',
            orgName10: '1',
            orgName11: '1'

        }, {
            id: 2,
            orgName0: '33',
            orgName1: '2',
            orgName2: '甘油',
            orgName3: '7681-52-9',
            orgName4: '固体',
            orgName5: 'g',
            orgName6: '1000000',
            orgName7: '1',
            orgName8: '通过审核',
            orgName9: '1',
            orgName10: '1',
            orgName11: '2'

        }]
    }

    /** 配置列 */
    const columns1 = [
        {
            title: '序号',
            dataIndex: 'orgName11',
            width: axconst.width.three,
        },
        {
            title: '创建人',
            dataIndex: 'orgName3',
            width: axconst.width.three,
        },
        {
            title: '创建时间',
            dataIndex: 'orgName4',
            width: axconst.width.time,
        },
        {
            title: '当前节点',
            dataIndex: 'orgName3',
            width: axconst.width.long,
        },
        {
            title: '状态',
            dataIndex: 'orgName4',
            width: axconst.width.fouronly,
        },
    ];

    const data1 = {
        list: [{
            id: 0,
            orgName0: '浓硫酸',
            orgName1: '那是一种内在的东西， 他们到达不了，也无法触及的',
            orgName2: '产品规格：AR',
            orgName3: '别名：醋酸;冰醋酸',
            orgName4: '固体',
            orgName5: '库存：9000',
            orgName6: '管控：非管控',
            orgName7: '包装:1瓶',
            orgName8: '性状：固体',
            orgName9: '销量：0',
            orgName10: '分类编码：1093859-61-0',
            orgName11: '0'

        }, {
            id: 1,
            orgName0: '22',
            orgName1: '2',
            orgName2: '甘油',
            orgName3: '7681-52-9',
            orgName4: '固体',
            orgName5: 'g',
            orgName6: '1000000',
            orgName7: '1',
            orgName8: '通过审核',
            orgName9: '1',
            orgName10: '1',
            orgName11: '1'

        }, {
            id: 2,
            orgName0: '33',
            orgName1: '2',
            orgName2: '甘油',
            orgName3: '7681-52-9',
            orgName4: '固体',
            orgName5: 'g',
            orgName6: '1000000',
            orgName7: '1',
            orgName8: '通过审核',
            orgName9: '1',
            orgName10: '1',
            orgName11: '2'

        }]
    }

    return (
        <AxLayout
            gutter={1}
            west={{
                span: 5,
                children: (
                    <AxCard flex={24}>
                        <AxTable
                            checkboxType='radio'
                            // showHeader={false}
                            size='default'
                            bordered={false}
                            columns={columns}
                            data={data}
                        />
                    </AxCard>
                ),
            }}
            center={{
                span: 19,
                items: {
                    north: {
                        children: (
                            <AxCard flex={24}>
                                <AxTable
                                    // checkboxModel={false}
                                    // showHeader={false}
                                    size='default'
                                    bordered={false}
                                    addemptycolumn={true}
                                    columns={columns1}
                                    data={data1}
                                />
                            </AxCard>
                        )
                    }
                },
            }}
        />
    );
};

export default Index;
